{php define('MUI', true);}
{template 'pay/header'}
<div class="mui-content pay-method">
	<h5 class="mui-desc-title mui-pl10">订单详情</h5>
	<ul class="mui-table-view">
		<li class="mui-table-view-cell">
			商品名称<span class="mui-pull-right mui-text-muted">{$params['title']}</span>
		</li>
		<li class="mui-table-view-cell">
			订单编号<span class="mui-pull-right mui-text-muted">{$params['ordersn']}</span>
		</li>
		<li class="mui-table-view-cell">
			商家名称<span class="mui-pull-right mui-text-muted">{$_W['account']['name']}</span>
		</li>
		{if !empty($mine)}
		<li class="mui-table-view-cell">
			优惠信息<span class="mui-pull-right mui-text-muted">{$mine['name']}</span>
		</li>
		{/if}
		<li class="mui-table-view-cell">
			商品价格<span class="mui-pull-right mui-text-success mui-big mui-rmb">{$params['fee']} 元</span>
		</li>
	</ul>
	{if !empty($token) || !empty($coupon)}
	<h5 class="mui-desc-title mui-pl10">可用卡券</h5>
	<ul class="mui-table-view ">
		{if !empty($token)}
		<li class="mui-table-view-cell mui-table-view-chevron">
			<a href="javascript:;" class="mui-navigate-right js-token">
				代金券
				{if !empty($token)}
				<span class="used-num">{php echo count($token);}张可用</span>
				{/if}
				<span class="mui-pull-right mui-mr10">
					<span class="mui-mr10 js-card-info">{if !empty($token)}未使用{else}无可用{/if}</span>
				</span>
			</a>
		</li>
		{/if}
		{if !empty($coupon)}
		<li class="mui-table-view-cell mui-table-view-chevron">
			<a href="javascript:;" class="mui-navigate-right js-coupon">
				折扣券
				{if !empty($coupon)}
				<span class="used-num">{php echo count($coupon);}张可用</span>
				{/if}
				<span class="mui-pull-right mui-mr10">
					<span class="mui-mr10 js-card-info">{if !empty($coupon)}未使用{else}无可用{/if}</span>
				</span>
			</a>
		</li>
		{/if}
	</ul>
	{/if}
	{if $pay['mix']['switch'] && $credtis[$setting['creditbehaviors']['currency']] > 0 && $credtis[$setting['creditbehaviors']['currency']] < $params['fee']}
	<ul class="mui-table-view">
		<li class="mui-table-view-cell mui-table-view-chevron">
			<input type="checkbox" name="mix" checked>
			混合支付<span class="mui-pull-right mui-text-success mui-big" data-price="{php echo sprintf('%.2f', $credtis[$setting['creditbehaviors']['currency']]);}">余额支付{php echo sprintf('%.2f', $credtis[$setting['creditbehaviors']['currency']]);} 元</span>
		</li>
	</ul>
	{/if}
	<ul class="mui-table-view">
		<li class="mui-table-view-cell mui-table-view-chevron">
			还需支付<span class="mui-pull-right mui-text-success mui-big mui-rmb js-need-pay" data-price="{php echo sprintf('%.2f', $params['fee']);}">{php echo sprintf('%.2f', $params['fee']);} 元</span>
		</li>
	</ul>
	<h5 class="mui-desc-title mui-pl10">选择支付方式</h5>
	<ul class="mui-table-view mui-table-view-chevron pay-style hide">
		{if !empty($pay['credit']['switch'])}
		<li class="mui-table-view-cell credit">
			<a class="mui-navigate-right mui-media credit-js-pay" href="javascript:;">
				<form action="{php echo url('mc/cash/credit');}" method="post" id="credit_pay">
					<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
					<input type="hidden" name="code" value="" />
					<input type="hidden" name="coupon_id" value="" />
				</form>
				<img src="resource/images/money.png" alt="" class="mui-media-object mui-pull-left"/>
				<span class="mui-media-body mui-block">
					余额
					<span class="mui-block mui-text-muted mui-rmb mui-mt5"> {php echo sprintf('%.2f', $credtis[$setting['creditbehaviors']['currency']]);}</span>
				</span>
			</a>
		</li>
		{/if}
		{if !empty($pay['baifubao']['switch'])}
		<li class="mui-table-view-cell">
			<a class="mui-navigate-right mui-media js-pay" href="javascript:;">
				<form action="{php echo url('mc/cash/baifubao');}" method="post">
					<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
					<input type="hidden" name="code" value="" />
					<input type="hidden" name="coupon_id" value="" />
				</form>
				<img src="resource/images/baidu-pay.png" alt="" class="mui-media-object mui-pull-left"/>
				<span class="mui-media-body mui-block">
					百度钱包
					<span class="mui-block mui-text-muted mui-mt5">百度安全支付服务</span>
				</span>
			</a>
		</li>
		{/if}
		{if !empty($pay['unionpay']['switch'])}
		<li class="mui-table-view-cell">
			<a class="mui-navigate-right mui-media js-pay" href="javascript:;">
				<form action="{php echo url('mc/cash/unionpay');}" method="post">
					<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
					<input type="hidden" name="code" value="" />
					<input type="hidden" name="coupon_id" value="" />
				</form>
				<img src="resource/images/yl-icon.png" alt="" class="mui-media-object mui-pull-left"/>
				<span class="mui-media-body mui-block">
					银联支付
					<span class="mui-block mui-text-muted mui-mt5">银联安全支付服务</span>
				</span>
			</a>
		</li>
		{/if}
		{if !empty($pay['wechat']['switch']) && intval($pay['wechat']['switch']) != 4}
		<li class="mui-table-view-cell mui-disabled js-wechat-pay">
			<a class="mui-navigate-right mui-media" href="javascript:;">
				<form action="{php echo url('mc/cash/wechat');}" method="post">
					<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
					<input type="hidden" name="code" value="" />
					<input type="hidden" name="coupon_id" value="" />
					<input type="hidden" name="mix_pay" value="" />
				</form>
				<img src="resource/images/wx-icon.png" alt="" class="mui-media-object mui-pull-left"/>
				<span class="mui-media-body mui-block">
					<span id="wetitle">微信支付</span>
					<span class="mui-block mui-text-muted mui-mt5">微信支付,安全快捷(必须使用微信内置浏览器)</span>
				</span>
			</a>
		</li>
		{/if}


		<li class="mui-table-view-cell mui-disabled js-webwxapp-pay hide">
			<a class="mui-navigate-right mui-media" href="javascript:;">

				<img src="resource/images/wx-icon.png" alt="" class="mui-media-object mui-pull-left"/>
				<span class="mui-media-body mui-block">
					<span id="wetitle">微信支付</span>
					<span class="mui-block mui-text-muted mui-mt5">微信支付,安全快捷(必须使用微信内置浏览器)</span>
				</span>
			</a>
		</li>


		{if !empty($pay['jueqiymf']['switch'])}
		<li class="mui-table-view-cell mui-disabled js-pay">
			<a class="mui-navigate-right mui-media" href="javascript:;">
				<form action="{php echo url('mc/cash/jueqiymf');}" method="post">
					<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
					<input type="hidden" name="code" value="" />
					<input type="hidden" name="coupon_id" value="" />
				</form>
				<img src="resource/images/wx-icon.png" alt="" class="mui-media-object mui-pull-left"/>
				<span class="mui-media-body mui-block">
					<span id="wetitle">一码付</span>
					<span class="mui-block mui-text-muted mui-mt5">一码多用</span>
				</span>
			</a>
		</li>
		{/if}
		{if !empty($pay['alipay']['switch'])}
		<li class="mui-table-view-cell">
			<a class="mui-navigate-right mui-media js-pay" href="javascript:;">
				<form action="{php echo url('mc/cash/alipay');}" method="post">
					<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
					<input type="hidden" name="code" value="" />
					<input type="hidden" name="coupon_id" value="" />
					<input type="hidden" name="mix_pay" value="" />
				</form>
				<img src="resource/images/zfb-icon.png" alt="" class="mui-media-object mui-pull-left"/>
				<span class="mui-media-body mui-block">
					支付宝
					<span class="mui-block mui-text-muted mui-mt5">简单、安全、快速</span>
				</span>
			</a>
		</li>
		{/if}
		{if !empty($pay['delivery']['switch'])}
		<li class="mui-table-view-cell">
			<a class="mui-navigate-right mui-media js-pay" href="javascript:;">
				<form action="{php echo url('mc/cash/delivery');}" method="post">
					<input type="hidden" name="params" value="{php echo base64_encode(json_encode($params));}" />
					<input type="hidden" name="code" value="" />
					<input type="hidden" name="coupon_id" value="" />
				</form>
				<img src="resource/images/sum-recharge.png" alt="" class="mui-media-object mui-pull-left"/>
				<span class="mui-media-body mui-block">
					货到付款
					<span class="mui-block mui-text-muted mui-mt5">线下当面交易，到店付款，货到付款</span>
				</span>
			</a>

			{/if}
			{if !empty($pay['line']['switch'])}
		<li class="mui-table-view-cell mui-disabled">
			<a class="mui-navigate-right mui-media">
				<img src="resource/images/icon-vip.png" alt="" class="mui-media-object mui-pull-left"/>
				<span class="mui-media-body mui-block">
					线下汇款
					<span class="mui-block mui-text-muted mui-mt5">{php echo htmlspecialchars_decode($pay['line']['message'])}</span>
				</span>
			</a>
		</li>
		{/if}
	</ul>
</div>
{if !empty($cards)}
<div id="pay-select-coupon-modal" class="mui-modal">
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-close mui-pull-right" href="javascript:;"></a>
		<h1 class="mui-title">请选择卡券</h1>
	</header>
	<nav class="mui-bar mui-bar-footer">
		<div class="js-coupon-submit">
			<input type="hidden" name="couponid" value="">
			<button class="mui-btn mui-btn-success mui-btn-block js-submit">确定</button>
		</div>
	</nav>
	<div class="mui-content">
		<div class="pay-select-coupon">
			<div class="js-coupon-show">
				{loop $coupon $li}
				<div class="mui-input-row mui-radio">
					<label>
						<div class="coupon-panel">
							<div class="mui-row">
								<div class="mui-col-xs-4 mui-text-center">
									<div class="coupon-panel-left">
										{$li['icon']}
									</div>
								</div>
								<div class="mui-col-xs-8">
									<div class="store-title mui-ellipsis">{$li['title']}</div>
									<div class="date">{$li['extra_date_info']}</div>
								</div>
							</div>
						</div>
						<input type="radio" name="coupon" value="{$li['id']}" />
					</label>
					<ol class="coupon-rules" style="display:none;">
						{if empty($li[description])}
						暂无说明
						{else}
						{php echo htmlspecialchars_decode($li['description'])}
						{/if}
					</ol>
					<div class="scan-rules js-scan-rules">折扣券使用规则<span class="fa fa-angle-up"></span></div>
				</div>
				{/loop}
			</div>
		</div>
	</div>
</div>

<div id="pay-select-token-modal" class="mui-modal">
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-close mui-pull-right" href="javascript:;"></a>
		<h1 class="mui-title">请选择卡券</h1>
	</header>
	<nav class="mui-bar mui-bar-footer">
		<div class="js-coupon-submit">
			<input type="hidden" name="couponid" value="">
			<button class="mui-btn mui-btn-success mui-btn-block js-submit">确定</button>
		</div>
	</nav>
	<div class="mui-content">
		<div class="pay-select-coupon">
			<div class="js-token-show">
				{loop $token $li}
				<div class="mui-input-row mui-radio">
					<label>
						<div class="coupon-panel">
							<div class="mui-row">
								<div class="mui-col-xs-4 mui-text-center">
									<div class="coupon-panel-left">
										{$li['icon']}
									</div>
								</div>
								<div class="mui-col-xs-8">
									<div class="store-title mui-ellipsis">{$li['title']}</div>
									<div class="date">{$li['extra_date_info']}</div>
								</div>
							</div>
						</div>
						<input type="radio" name="coupon" value="{$li['id']}" />
					</label>
					<ol class="coupon-rules" style="display:none;">
						{if empty($li[description])}
						暂无说明
						{else}
						{php echo htmlspecialchars_decode($li['description'])}
						{/if}
					</ol>
					<div class="scan-rules js-scan-rules">代金券使用规则<span class="fa fa-angle-up"></span></div>
				</div>
				{/loop}
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
    $(document).on('click', '.js-scan-rules', function() {
        $(this).prev().toggle();
        $(this).find('span').toggleClass('fa-angle-up');
        $(this).find('span').toggleClass('fa-angle-down');
    });
    $(document).on('click', 'input[type="radio"]', function() {
        hidden_couponid = $('input[name="couponid"]').val();
        var couponid = $(this).val();
        if (!hidden_couponid) {
            $('input[type="radio"]').prop('checked', false);
            $(this).prop('checked', true);
            $('input[name="couponid"]').val(couponid);
        } else {
            if (hidden_couponid == couponid) {
                $(this).prop('checked', false);
                $('input[name="couponid"]').val('');
            } else {
                $('input[type="radio"]').prop('checked', false);
                $(this).prop('checked', true);
                $('input[name="couponid"]').val(couponid);
            }
        }
    });
    var cards_str = '{$cards_str}';
    if (cards_str) {
        cards_str = $.parseJSON(cards_str);
    } else {
        cards_str = {};
    }
    $(document).on('click', '.js-coupon', function() {
        $('#pay-select-coupon-modal').addClass('mui-active');
    });
    $(document).on('click', '.js-token', function() {
        $('#pay-select-token-modal').addClass('mui-active');
    });
    $(document).on('click', '.mui-icon-close', function() {
        $('#pay-select-coupon-modal').removeClass('mui-active');
        $('#pay-select-token-modal').removeClass('mui-active');
    });
    $(document).on('click', '.js-submit', function() {
        var checked_card = $('input[name="couponid"]').val();
        var price = $('.js-need-pay').data('price');
        if(checked_card && cards_str[checked_card]) {
            need_pay = (price - cards_str[checked_card].discount_cn).toFixed(2);
            if (cards_str[checked_card].type == '1') {
                $('.js-coupon .js-card-info').html('已抵用'+cards_str[checked_card].discount_cn+'元');
                $('.js-token .js-card-info').html('未使用');
            };
            if (cards_str[checked_card].type == '2') {
                $('.js-token .js-card-info').html('已抵用'+cards_str[checked_card].discount_cn+'元');
                $('.js-coupon .js-card-info').html('未使用');
            };
            $('.js-need-pay').html(need_pay + ' 元');
            $('.js-pay input[name="coupon_id"]').val(checked_card);
            $('.js-pay input[name="code"]').val(cards_str[checked_card]['code']);
        } else {
            $('.js-need-pay').html(price + ' 元');
            $('.js-token .js-card-info').html('未使用');
            $('.js-coupon .js-card-info').html('未使用');
            $('.js-pay input[name="coupon_id"]').val(0);
        }
        $('#pay-select-coupon-modal').removeClass('mui-active');
        $('#pay-select-token-modal').removeClass('mui-active');
        $('.mui-backdrop').remove('.mui-backdrop');
        $('.pay-method').removeAttr('style');
    })
</script>
{/if}
<script type="text/javascript">
    check_password = '';
    $('.credit-js-pay').click(function() {
        {if empty($credit_pay_setting)}
        $(this).find('form').submit();
        return true;
        {/if}
        mui.prompt('','','请输入6位数的密码',['<div id="submit_password">确定</div>'],function(){
            $.post("{php echo url('mc/cash/check_password');}", {'password' : $(".mui-popup-input input").val()}, function(data) {
                data = $.parseJSON(data);
                if (data.message == 0) {
                    check_password = 'pass';
                    $('#credit_pay').submit();
                    return false;
                } else {
                    alert('密码输入错误');
                    return false;
                }
            });
        },'div')
        document.querySelector('.mui-popup-input input').type='password';
        return false;
    });
    {if $pay['mix']['switch'] && $credtis[$setting['creditbehaviors']['currency']] > 0 && $credtis[$setting['creditbehaviors']['currency']] < $params['fee']}
    $(function() {
        $('[name="mix_pay"]').val(true);
        $('.credit').hide();
        fee = $('.js-need-pay').data('price') - "{$credtis[$setting['creditbehaviors']['currency']]}";
        $('.js-need-pay').data('price', fee);
        $('.js-need-pay').html(fee + '元');
    })
    {/if}
    $('[name="mix"]').click(function() {
        if ($(this).prop('checked') === true) {
            $('[name="mix_pay"]').val(true);
            fee = $('.js-need-pay').data('price') - "{$credtis[$setting['creditbehaviors']['currency']]}";
            $('.credit').hide();
        } else {
            $('[name="mix_pay"]').val(false);
            fee = parseFloat($('.js-need-pay').data('price')) + parseFloat("{$credtis[$setting['creditbehaviors']['currency']]}");
            $('.credit').show();
        }
        $('.js-need-pay').data('price', fee);
        $('.js-need-pay').html(fee + '元');
    });
    if(window.__wxjs_environment === 'miniprogram') {
        $('.pay-style').removeClass('hide');
        $('.pay-style li').hide();
        $('.js-webwxapp-pay').removeClass('hide');
        $('.pay-style .js-webwxapp-pay').show();
        $('.js-webwxapp-pay').click(function(){
            wx.miniProgram.navigateTo({
                url: "/wxapp_web/pages/view/pay?orderid={$params['tid']}&module_name={$params['module']}&title={$params['title']}"
            })
        });
    } else {
        $('.pay-style').removeClass('hide');
        $('.pay-style').show();
    }
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        $('.js-wechat-pay').removeClass('mui-disabled');
        $('.js-wechat-pay a').addClass('js-pay');
        $('#wetitle').html('微信支付');
    });

    $(document).on('click', '.js-pay', function() {
        $(this).prop('disabled', true);
        $(this).find('form').submit();
    })
</script>


